<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .false
        {
            color:red;
        }
        .true
        {
            color:green;
        }
    </style>
</head>
<body>
    <input type="button" value="重新开始游戏" onclick="reset()"><br>
    请输入你猜测的数字：<input type="text" class="what" value=""><input type="button" value="猜" onclick="guessit()"><br>
    已经猜测的次数：<span class="guessnum">0</span><br>
    结果：<span class="result">未确认</span>
</body>
<script>
    let what=document.querySelector('.what')
    let guessnum=document.querySelector('.guessnum')
    let result=document.querySelector('.result')

    let unknownnum=Math.floor(Math.random()*100)+1
    console.log(unknownnum)

    function reset()
    {
        what.value=""
        guessnum.innerHTML=0
        result.innerHTML="未确认"
        unknownnum=Math.floor(Math.random()*100)+1
        console.log(unknownnum)
        result.className="result";
    }
    function guessit()
    {
        let tmp=parseInt(what.value)
        if(isNaN(tmp)||tmp<1||tmp>100)
        {
            alert('请输入1~100的数字')
            return;
        }
        guessnum.innerHTML=parseInt(guessnum.innerHTML)+1
        if(unknownnum<tmp)
        {
            result.innerHTML="猜大了"
            result.className="false";
        }
        else if(unknownnum>tmp)
        {
            result.innerHTML="猜小了"
            result.className="false";
        }
        else
        {
            result.innerHTML="恭喜你，猜中了！！！"
            result.className="true";
        }
    }



</script>
</html>